<template>
  <div class="More-Search-Header">
    <el-row>
      <el-col :span="11">
        <div style="border:2px solid #2a971e;height: 45px;padding-top: 15px;padding-left: 15px;">

          <div v-for="i in all_tags" style="margin-right: 10px;float:left;">
            <el-tag closable :key="i" style="margin-right: 10px;" @close="del_tag(i)" type="success"
                    v-if="i.style===false">{{ i.name }}
            </el-tag>
          </div>
        </div>
      </el-col>
      <el-col :span="1">
      </el-col>
      <el-col :span="10">
        <div class="search-input-style">
          <el-input v-model="input" placeholder="">
          </el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <el-button v-if="job_tag" @click="search_job_info" type="success">搜索</el-button>
        <el-button v-if="company_tag" @click="search_company_info" type="success">搜索</el-button>
      </el-col>
    </el-row>
    <div style="top: 20px;border:2px solid #2a971e;position: relative;padding-bottom: 40px;padding-left: 15px;">
      <p style="font-family: 'Roboto',sans-serif;color: #348e69;">点击选择要搜索的标签:</p>
      <div v-for="i in all_tags" style="margin-right: 10px;float: left;">
        <el-tag class="tag-style" v-if="i.style===true" @click="get_tag(i)" type="success">
          {{ i.name }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MoreSearch',
  data () {
    return {
      input: '',
      search_num: 1,
      need_search_tags: [],
    }
  },
  props: ['all_tags', 'job_tag', 'company_tag', 'job_info_data_in_search','company_data_in_search'],

  methods: {
    search_job_info () {
      console.log('search success!')
      //console.log(!this.input)
      if (!this.input) {
        if (this.need_search_tags.length === 0) {
          sessionStorage.setItem('job_info_data_out_search', '')
          console.log('search null!')
        }
        console.log(22222)
        let last_data = []
        let temp_data = JSON.parse(JSON.stringify(this.job_info_data_in_search))
        //console.log(temp_data)
        last_data = JSON.parse(JSON.stringify(temp_data))
        console.log(last_data)
        //console.log(this.need_search_tags)
        let last_data2 = []
        if (this.need_search_tags.length === 0) {
          last_data2 = JSON.parse(JSON.stringify(last_data))
          console.log(last_data2)
        } else {
          console.log(this.need_search_tags)
          for (let i = 0; i < last_data.length; i = i + 1) {
            let flag = true
            for (let j = 0; j < this.need_search_tags.length; j = j + 1) {
              //console.log(this.need_search_tags.length)
              // console.log(last_data[i].tap_infos)
              // console.log(this.need_search_tags[j])
              // console.log(last_data[i].tap_infos.indexOf(this.need_search_tags[j]))
              if (last_data[i].tap_infos.indexOf(this.need_search_tags[j]) < 0) {
                flag = false
              }
            }
            if (flag === true) {
              last_data2.push(last_data[i])
              // console.log(last_data[i])
            }
          }
          for (let i = 0; i < last_data2.length; i = i + 1) {
            last_data2[i].tap_infos = last_data2[i].tap_infos.slice(0, last_data2[i].tap_infos.length - 1)
            let temp = ''
            if (i > 0) {
              temp = temp + '，'
            }
            temp = temp + last_data2[i].tap_infos
            //console.log(last_data2[i])
            last_data2[i].tap_infos = last_data2[i].tap_infos.split('，')
          }
          console.log(last_data2)
          sessionStorage.setItem('job_info_data_out_search', JSON.stringify(last_data2))
          this.input = ''
        }
      } else {
        console.log(11111)
        let last_data = []
        let temp_data = JSON.parse(JSON.stringify(this.job_info_data_in_search))
        //console.log(temp_data)
        if (!this.input) {
          last_data = JSON.parse(JSON.stringify(temp_data))
          console.log(last_data)
        } else {
          for (let i = 0; i < temp_data.length; i = i + 1) {
            //console.log(temp_data[i])
            for (let key in temp_data[i]) {
              //console.log(temp_data[i][key])
              //console.log(typeof temp_data[i][key])
              if ((typeof temp_data[i][key]) === 'string') {
                if (temp_data[i][key].indexOf(this.input) >= 0) {
                  last_data.push(temp_data[i])
                }
              }
            }
          }
        }
        //console.log(last_data)
        //console.log(this.need_search_tags)
        let last_data2 = []
        if (this.need_search_tags.length === 0) {
          last_data2 = JSON.parse(JSON.stringify(last_data))
        } else {
          // console.log(this.need_search_tags)
          for (let i = 0; i < last_data.length; i = i + 1) {
            let flag = true
            for (let j = 0; j < this.need_search_tags.length; j = j + 1) {
              //console.log(this.need_search_tags.length)
              // console.log(last_data[i].tap_infos)
              // console.log(this.need_search_tags[j])
              // console.log(last_data[i].tap_infos.indexOf(this.need_search_tags[j]))
              if (last_data[i].tap_infos.indexOf(this.need_search_tags[j]) < 0) {
                flag = false
              }
            }
            if (flag === true) {
              last_data2.push(last_data[i])
              // console.log(last_data[i])
            }
          }
        }
        for (let i = 0; i < last_data2.length; i = i + 1) {
          last_data2[i].tap_infos = last_data2[i].tap_infos.slice(0, last_data2[i].tap_infos.length - 1)
          let temp = ''
          if (i > 0) {
            temp = temp + '，'
          }
          temp = temp + last_data2[i].tap_infos
          last_data2[i].tap_infos = last_data2[i].tap_infos.split('，')
        }
        console.log(last_data2)
        sessionStorage.setItem('job_info_data_out_search', JSON.stringify(last_data2))
        this.input = ''
      }
      this.$router.go(0)

    }
    ,
    search_company_info () {
      console.log('search go')
      if(!this.input){
        if(this.need_search_tags.length>0){
          this.input = this.need_search_tags[0]
          // console.log(this.need_search_tags[0])
          // console.log(22222)
          let last_data = []
          let temp_data = JSON.parse(JSON.stringify(this.company_data_in_search))
          //console.log(temp_data)
          if (!this.input) {
            last_data = JSON.parse(JSON.stringify(temp_data))
            //console.log(last_data)
          } else {
            //console.log('goto tap search')
            for (let i = 0; i < temp_data.length; i = i + 1) {
              //console.log(temp_data[i])
              for (let key in temp_data[i]) {
                //console.log(temp_data[i][key])
                //console.log(typeof temp_data[i][key])
                if ((typeof temp_data[i][key]) === 'string') {
                  // console.log(temp_data[i])
                  // console.log(temp_data[i][key].indexOf(this.input))
                  if (temp_data[i][key].indexOf(this.input) >= 0) {
                    last_data.push(temp_data[i])
                    //console.log(temp_data[i])
                  }
                }
              }
            }
          }
         // console.log(last_data)
          //console.log(this.need_search_tags)
          sessionStorage.setItem('company_data_out_search', JSON.stringify(last_data))
          this.input = ''
        }else {
          sessionStorage.setItem('company_data_out_search', '')
          console.log('search null!')
        }
      }else {
        console.log(11111)
        let last_data = []
        let temp_data = JSON.parse(JSON.stringify(this.company_data_in_search))
        //console.log(temp_data)
        if (!this.input) {
          last_data = JSON.parse(JSON.stringify(temp_data))
          //console.log(last_data)
        } else {
          for (let i = 0; i < temp_data.length; i = i + 1) {
            //console.log(temp_data[i])
            for (let key in temp_data[i]) {
              //console.log(temp_data[i][key])
              //console.log(typeof temp_data[i][key])
              if ((typeof temp_data[i][key]) === 'string') {
                if (temp_data[i][key].indexOf(this.input) >= 0) {
                  last_data.push(temp_data[i])
                }
              }
            }
          }
        }
        //console.log(last_data)
        //console.log(this.need_search_tags)
        sessionStorage.setItem('company_data_out_search', JSON.stringify(last_data))
        this.input = ''
      }

      this.$router.go(0)
    }
    ,
    get_tag (i) {
      //console.log(this.search_num)
      if(this.company_tag){
        if (this.search_num > 1) {
          this.$confirm('选择的标签数不能大于1！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } else {
          this.search_num = this.search_num + 1
          i.style = false
          this.need_search_tags.push(i.name)
          // console.log(this.need_search_tags)
        }
      }else {
        if (this.search_num > 3) {
          this.$confirm('选择的标签数不能大于3！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } else {
          this.search_num = this.search_num + 1
          i.style = false
          this.need_search_tags.push(i.name)
          // console.log(this.need_search_tags)
        }
      }

    }
    ,
    del_tag (i) {
      this.search_num = this.search_num - 1
      i.style = true
      //i.name.splice(i.name.indexOf(i), 1)
      this.need_search_tags.pop()
      //console.log(this.need_search_tags)
    }
  },

}
</script>

<style>
.More-Search-Header {
  position: relative;
  width: 70%;
  left: 15%;
  padding-top: 50px;
  padding-bottom: 30px;
}

.search-input-style .el-input__inner {
  background-color: #f9fff8;
  border: 2px solid #d4ffc4;
}

.search-input-style .el-input__inner::placeholder {
  color: #92DD6F;;
}

.search-input-style .el-input__inner:hover {
  border-color: #68de1e;
}

.search-input-style .el-input__inner:focus {
  border-color: #41b307;
}

.tag-style:hover {
  background: #80d776;
  cursor: pointer;
  color: #FFFFFF;
}
</style>
